<template>
  <div>
    <el-row class="my-header" type="flex" justify="center" align="middle">
      智能家居 - {{ headerTextList[viewsIndex - 1] }}
    </el-row>
    <el-row>
      <transition
        name="index-change"
        enter-active-class="animate__animated animate__fadeIn"
      >
        <component :is="selectView[viewsIndex - 1]" />
      </transition>
    </el-row>
    <div v-show="bottomShow">
      <el-row class="my-bottom" type="flex" justify="space-around" align="middle">
        <el-link type="primary" :underline="false" @click="changeIndex(1)">
          <i
            ref="i_1"
            :class="'iconfont ' + (viewsIndex === 1?'icon-homefull':'icon-home') + ' my-bottom-icon'"
          />
        </el-link>
        <el-link type="primary" :underline="false" @click="changeIndex(2)">
          <i
            ref="i_3"
            :class="'iconfont ' + (viewsIndex === 2?'icon-datafull':'icon-data') + ' my-bottom-icon'"
          />
        </el-link>
      </el-row>
    </div>
  </div>
</template>

<script>
import DataIndex from '@/views/Data/Index'
import HomeIndex from '@/views/Home/Index'
import PersonIndex from '@/views/Person/Index'

import { getWatchPhoneNum, endConnect } from "@/util/data/api-SystemInfo"

export default {
  name: "Index",
  components: {
    dataIndex: DataIndex,
    homeIndex: HomeIndex,
    personIndex: PersonIndex
  },
  data() {
    return {
      bottomShow: true,
      viewsIndex: 1,
      selectView: [
        'home-index', 'data-index'
      ],
      headerTextList: [
          '家居控制', '数据展示'
      ],
      socket: ''
    }
  },
  methods: {
    changeIndex(index) {
      this.viewsIndex = index
      if(index === 1) {
        this.$refs.i_1.style = 'text-decoration: underline;'
        this.$refs.i_3.style = 'text-decoration: none;'
      } else if (index === 2) {
        this.$refs.i_1.style = 'text-decoration: none;'
        this.$refs.i_3.style = 'text-decoration: underline;'
      }
    },
    endClockAllDevNum(event, closeEvent) {
     endConnect()
     clearInterval(closeEvent)
    }
  },
  mounted() {
    // this.socket = new WebSocket('ws://localhost:8010/heart')
    // this.socket.addEventListener('message', event => {
    //   alert(event.data)
    //   const that = this
    //   setTimeout(() => {
    //     that.socket.send('I am ok!')
    //   }, 1000)
    // })
    const that = this
    this.clockAllDevNum = setInterval(() => {
      getWatchPhoneNum().then(response => {
        const { data } = response
        if (!data) {
          that.$store.state.devNum = 0
          that.$store.state.serverTime = 0
        } else {
          that.$store.state.devNum = response.data.devNum
          that.$store.state.serverTime = response.data.time
          that.$store.state.curtainControl = response.data.curtainControl
          that.$store.state.blobControl = response.data.blobControl
          that.$store.state.fanControl = response.data.fanControl
          that.$store.state.doorControl = response.data.doorControl
          that.$store.state.oledControl = response.data.oledControl
        }
      }).catch(error => {
        console.log(error)
        that.$store.state.devNum = 0
        that.$store.state.serverTime = 0
      })
    }, 500)
    window.addEventListener('beforeunload', e => this.endClockAllDevNum(e, this.clockAllDevNum))
  },
}
</script>

<style scoped>
.my-header {
  background-color: #409EFF;
  color: white;
  font-size: 25px;
  height: 50px;
  box-shadow:0 3px 4px #409EFF;
  z-index: 5;
}
.my-bottom {
  /*float: bottom;*/
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #FFFFFF;
  border-top: 1px solid #DCDFE6 ;
  width: 100%;
  padding: 15px;
}
.my-bottom-icon {
  font-size: 30px;
}
.animate__animated.animate__fadeIn {
  --animate-duration: 1s;
}
</style>
